<template>
    <el-row :gutter="20">
        <el-col :span="6">
            <chart-card ref="cardRef">
                <template #chart-title>
                    今日销售额
                </template>
                <template #chart-number>
                    {{chartsData.salesToday}}
                </template>
                <template #charts>
                    <div><span>月同比:{{chartsData.salesGrowthLastDay}}<svg t="1664455717839" class="icon"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3405"
                                width="12" height="12">
                                <path d="M64 320l448 448 448-448z" fill="#d81e06" p-id="3406"></path>
                            </svg></span></div>
                    <div><span>日同比:{{chartsData.salesGrowthLastMonth}}<svg t="1664455590215" class="icon"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2368"
                                width="12" height="12">
                                <path d="M960 704L512 256l-448 448z" fill="#1afa29" p-id="2369"></path>
                            </svg></span></div>
                </template>
                <template #chart-footer>
                    昨日销售额{{chartsData.salesLastDay}}
                </template>
            </chart-card>
        </el-col>
        <el-col :span="6">
            <chart-card>
                <template #chart-title>
                    今日订单
                </template>
                <template #chart-number>
                    {{chartsData.orderToday}}
                </template>
                <template #charts>
                    <!-- 折线图 -->
                    <line-chart :data="chartsData.orderTrend"></line-chart>
                </template>
                <template #chart-footer>
                    昨日订单量{{chartsData.orderLastDay}}
                </template>
            </chart-card>
        </el-col>
        <el-col :span="6">
            <chart-card>
                <template #chart-title>
                    今日交易用户数
                </template>
                <template #chart-number>
                    {{chartsData.orderUser}}
                </template>s
                <template #charts>
                    <!-- 柱状图 -->
                    <bar-chart :data="chartsData.orderUserTrend"></bar-chart>
                </template>
                <template #chart-footer>
                    退货率{{chartsData.returnRate}}
                </template>
            </chart-card>
        </el-col>
        <el-col :span="6">
            <chart-card>
                <template #chart-title>
                    累计用户数
                </template>
                <template #chart-number>
                    {{chartsData.usersTotal}}
                </template>
                <template #charts>
                    <!-- 进度条 -->
                    <progress-chart></progress-chart>
                </template>
                <template #chart-footer>
                    <div>
                        <span>日同比:{{chartsData.userGrowthLastDay}}<svg t="1664455590215" class="icon"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2368"
                                width="12" height="12">
                                <path d="M960 704L512 256l-448 448z" fill="#d81e06" p-id="2369"></path>
                            </svg></span>
                        <span>月同比:{{chartsData.userGrowthLastMonth}}<svg t="1664455717839" class="icon"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3405"
                                width="12" height="12">
                                <path d="M64 320l448 448 448-448z" fill="#1afa29" p-id="3406"></path>
                            </svg></span>
                    </div>
                </template>
            </chart-card>
        </el-col>
    </el-row>

</template>

<script setup lang="ts">
import ChartCard from './ChartCard/index.vue'
// 折线图
import LineChart from './lineChart/index.vue'
// 柱状图
import BarChart from './barChart/index.vue'
// 进度条
import ProgressChart from './progressChart/index.vue'
import * as echarts from 'echarts';
import { ref ,onMounted} from 'vue'
// 存储card实例
let cardRef = ref()

// 接收父组件给的数据
defineProps(['chartsData'])
</script>

<style scoped>

</style>